import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, Popconfirm, Row, Table} from 'antd';
import Constants from '../../utils/Constants';
import PortSelect from '../../components/common/portSelect';
import RightConstants from '../../utils/RightConstants';
import RightBox from '../../components/common/rightBox';
import StreetSelect from '../../components/common/streetSelect';
import TrailerFeeDetail from '../../components/fee/trailerFee/trailerFeeDetail';
import ImportFile from '../../components/common/importFile';

const R = require("ramda");
const FormItem = Form.Item;
const trailerFee = Form.create()(class TrailerFee extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'trailerFee/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }
    getStreet = (value) => {
        this.props.form.setFieldsValue({ street: null})
        this.props.dispatch({
            type: "app/getAreaStreetsTree",
            districtCode: value[2]
        })
    }

    handleOpen = (id, disabled, district) => {
        this.props.dispatch({
            type: 'trailerFee/getTrailerFeeById',
            payload: { id }
        });
        this.props.dispatch({ type: 'supplier/getSupplierList', payload: { supplierType: Constants.SUPPLIER_TYPE.TRAILER } });  //查询拖车供应商

        if(district){
            this.props.dispatch({
                type: "app/getAreaStreetsTree",
                districtCode: district
            })
        }
        this.trailerFeeDetail.handleOpen(disabled);
    }

    handleImport = (module) =>{
        this.importFile.handleOpen(module);
    }

    handleDelete = id => {
        this.props.dispatch({
            type: 'trailerFee/deleteTrailerFeeById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.trailerFee.page;
        if (flag) newPage.page = 1;

        let values = this.props.form.getFieldsValue()
        values.province = R.isNil(values.area) ? null : values.area[0];
        values.city = R.isNil(values.area) ? null : values.area[1];
        values.district = R.isNil(values.area) ? null : values.area[2];
        values.street = R.isNil(values.area) ? null : values.area[3];

        this.props.dispatch({
            type: 'trailerFee/getListForPage',
            payload: {
                ...values,
                page: newPage
            }
        });
    };


    columns = [
        { title: '供应商名称/代码', key: 'companyName', 
            render: record =>{
                return <span>{record.companyName}({record.supplierCode})</span>
            }    
        },
        { title: '装柜地址', dataIndex: 'area', key: 'area' },
        { title: '出货港口',
            render: record =>{
                return <span>{record.portEnName}({record.portName})</span>
            }
        },
        { title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp' },
        { title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp' },
        { title: '40HQ', dataIndex: 'fee40hq', key: 'fee40hq' },
        { title: '限重(Kg)', dataIndex: 'weightLimit', key: 'weightLimit' },
        { title: '有效开始时间', dataIndex: 'begindate', key: 'begindate' },
        { title: '有效截止时间', dataIndex: 'enddate', key: 'enddate' },
        {
            title: '操作',
            render: (record) => {
                let editLink = <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_TRAILERFEE_EDIT} split={true}><a href="#" onClick={this.handleOpen.bind(this, record.id, false, record.district)}>编辑</a></RightBox>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                    placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink = <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_TRAILERFEE_DELETE} split={true}>{deleteLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true, record.district)}>查看</a>
                return <span>{editLink}{deleteLink}{viewLink}</span>
            }
        }
    ];

    render() {
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        let formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 20 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.trailerFee.page.size,
            current: this.props.trailerFee.page.page,
            total: this.props.trailerFee.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.trailerFee.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'trailerFee/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },

            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.trailerFee.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'trailerFee/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'供应商'}>
                            {getFieldDecorator('supplier')
                            (
                                <Input  maxLength="20" placeholder="可根据供应商代码、中英文名称搜索" />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'出货港口'}>
                            {getFieldDecorator('port')
                            (<PortSelect style={{width: '100%'}} portType={"1"} allowClear/>)}
                            </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout2} label="装柜地址" hasFeedback>
                            {getFieldDecorator('area')(
                                <StreetSelect style={{ width: "100%" }}  onChange={this.getStreet.bind(this)}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={11} style={{ marginLeft: 24}}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this, true)} size={'default'}>查询</Button>
                        <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_TRAILERFEE_ADD}>
                            <Button type="primary" icon="plus" style={{ marginRight: 5 }} onClick={this.handleOpen.bind(this, null, false)} size={'default'}>新增拖车费</Button>
                        </RightBox>
                        <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_TRAILERFEE_IMPORT}>
                            <Button type="primary" icon="plus" style={{ marginRight: 5 }} onClick={this.handleImport.bind(this, Constants.IMPORT_MODULE[6])} size={'default'}>导入拖车费</Button>
                        </RightBox>
                    </Col>
                </Row>
                <Table
                    rowKey='id'
                    dataSource={this.props.trailerFee.list}
                    loading={this.props.loading}
                    columns={this.columns}
                    bordered={true}
                    size={'middle'}
                    pagination={pagination} />
                <TrailerFeeDetail wrappedComponentRef={(inst) => this.trailerFeeDetail = inst} refreshList={this.handleSearch} />
                <ImportFile wrappedComponentRef={(inst) => this.importFile = inst} refreshList={this.handleSearch} />
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.trailerFee, trailerFee: state.trailerFee
    };
}

export default connect(mapStateToProps)(trailerFee);
